<template>
	<div class="app-container">
		<switch-roles @change="handleRolesChange"></switch-roles>
		<div :key="key" style="margin-top:30px;">
			<div>
				<span v-permission="['admin']" class="permission-alert">
					Only
					<el-tag class="permission-tag" size="small">admin</el-tag> can see this
				</span>
				<el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
					v-permission="['admin']"
				</el-tag>
			</div>

			<div>
				<span v-permission="['editor']" class="permission-alert">
					Only
					<el-tag class="permission-tag" size="small">editor</el-tag> can see this
				</span>
				<el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
					v-permission="['editor']"
				</el-tag>
			</div>

			<div>
				<span v-permission="['admin','editor']" class="permission-alert">
					Both
					<el-tag class="permission-tag" size="small">admin</el-tag> and
					<el-tag class="permission-tag" size="small">editor</el-tag> can see this
				</span>
				<el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
					v-permission="['admin','editor']"
				</el-tag>
			</div>
		</div>

		<div :key="'checkPermission'+key" style="margin-top:60px;">
			<aside>
				In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
				<br /> e.g.
			</aside>

			<el-tabs type="border-card" style="width:550px;">
				<el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
					Admin can see this
					<el-tag class="permission-sourceCode" type="info">
						v-if="checkPermission(['admin'])"
					</el-tag>
				</el-tab-pane>

				<el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
					Editor can see this
					<el-tag class="permission-sourceCode" type="info">
						v-if="checkPermission(['editor'])"
					</el-tag>
				</el-tab-pane>

				<el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
					Both admin or editor can see this
					<el-tag class="permission-sourceCode" type="info">
						v-if="checkPermission(['admin','editor'])"
					</el-tag>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import permission from "/vue/directive/permission/index.js";
	import checkPermission from '/vue/utils/permission.js';
	const SwitchRoles = httpVueLoader('/vue/views/permission/components/SwitchRoles.vue');

	module.exports = {
		name: 'DirectivePermission',
		components: { "switch-roles": SwitchRoles },
		directives: { permission },
		data() {
			return {
				key: 1 // 为了能每次切换权限的时候重新初始化指令
			}
		},
		methods: {
			checkPermission,
			handleRolesChange() {
				this.key++
			}
		}
	}
</script>

<style scoped>
	.app-container /deep/ .permission-alert {
		width: 320px;
		margin-top: 15px;
		background-color: #f0f9eb;
		color: #67c23a;
		padding: 8px 16px;
		border-radius: 4px;
		display: inline-block;
	}

	.app-container /deep/ .permission-sourceCode {
		margin-left: 15px;
	}

	.app-container /deep/ .permission-tag {
		background-color: #ecf5ff;
	}
</style>

